<template>
  <div class="node-panel">
    <div
      v-for="(item, key) in state.nodePanel"
      :key="key"
      class="approve-node"
      @mousedown="dragNode(item)"
    >
      <div class="node-shape" :class="'node-' + item.type" />
      <div class="node-label">{{ item.text }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ILogicFlowNodePanelItem } from "@/types/logic-flow";
import LogicFlow from "@logicflow/core";
import { reactive } from "vue";
const props = defineProps<{ lf?: LogicFlow }>();
const state = reactive({
  nodePanel: [
    {
      type: "table_input",
      text: "表输入",
    },
    {
      type: "sql_input",
      text: "sql输入",
    },
    {
      type: "left_join",
      text: "左连接",
    },
    {
      type: "right_join",
      text: "右连接",
    },
    {
      type: "inner_join",
      text: "内连接",
    },
    {
      type: "full_join",
      text: "全连接",
    },
    {
      type: "indicator_output",
      text: "指标输出",
    },
  ],
});
const dragNode = (item: ILogicFlowNodePanelItem) => {
  props.lf?.dnd.startDrag({
    type: item.type,
    text: item.text,
  });
};
</script>
<style lang="scss" scoped>
.node-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 101;
  padding: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px #e4e0db;
  .approve-node {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    .node-label {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 12px;
      transform: translate(-50%, -50%);
    }
  }
  .node-shape {
    box-sizing: border-box;
    &.node-table_input {
      width: 120px;
      height: 50px;
      background-color: #facd91;
      border: 2px solid #facd91;
      border-radius: 4px;
    }
    &.node-sql_input {
      width: 120px;
      height: 50px;
      background-color: #caf982;
      border: 2px solid #caf982;
      border-radius: 4px;
    }
    &.node-left_join {
      width: 120px;
      height: 50px;
      background-color: #81d3f8;
      border: 2px solid #81d3f8;
      border-radius: 4px;
    }
    &.node-right_join {
      width: 120px;
      height: 50px;
      background-color: #facd91;
      border: 2px solid #facd91;
      border-radius: 4px;
    }
    &.node-inner_join {
      width: 120px;
      height: 50px;
      background-color: #caf982;
      border: 2px solid #caf982;
      border-radius: 4px;
    }
    &.node-full_join {
      width: 120px;
      height: 50px;
      background-color: #81d3f8;
      border: 2px solid #81d3f8;
      border-radius: 4px;
    }
    &.node-indicator_output {
      width: 120px;
      height: 50px;
      background-color: #81d3f8;
      border: 2px solid #81d3f8;
      border-radius: 4px;
    }
  }
}
</style>
